<template>
  <div id="app">
    <transition :name="AppSlideDir">
      <!-- 有选择性的保存不想销毁的页面 -->
      <keep-alive :include="aliveViews.toString()">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <preview-img v-if="preImgShow"></preview-img>
    <action-sheet v-if="actionSheetConfig.isShow"></action-sheet>
  </div>
</template>
<script>
import aliveViews from "@/utils/aliveViews";
import PreviewImg from './components/PreviewImg.vue';
import {mapState} from "vuex";
import ActionSheet from './components/ActionSheet.vue';
export default {
  name:"App",
  data(){
    return {
      aliveViews,
      AppSlideDir:"s-left"
    }
  },
  computed:{
    ...mapState(["preImgShow","actionSheetConfig"])
  },
  components:{
    PreviewImg,
    ActionSheet
  },
  watch:{
    $route(to,from){
      if(from.meta.index < to.meta.index){
        this.AppSlideDir = "s-left";
      } else {
        this.AppSlideDir = "s-right";
      }
    }
  }
}
</script>
<style>
 @import url("./assets/iconfont/iconfont.css");
*{
  margin:0;
  padding:0;
  list-style-type: none;
}
#app{
  width: 100vw;
  height: 100vh;
}
</style>
<style lang="scss" scoped>
// 动画效果
.s-left-enter{
  transform: translateX(100%);
}
.s-right-enter{
  transform: translateX(-100%);
}
.s-left-enter-to,
.s-left-leave,
.s-left-leave-to,
.s-right-enter-to,
.s-right-leave,
.s-right-leave-to{
  transform: translateX(0);
}
.s-left-enter-active,
.s-left-leave-active,
.s-right-enter-active,
.s-right-leave-active{
  transition: all 0.2s linear;
  position: fixed;
}
</style>
